﻿
@using System.IO; 
@{
    ViewData["Title"] = "Home Page";
    var dir = new DirectoryInfo(@"S:\gif图库\欧美gif");
    List<string> gifs = new List<string>();
}

    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        @for (int i = 900; i < 1000; i++)
        {
    <img src="\gif\@dir.GetFiles()[i].Name" alt="@dir.GetFiles()[i].Name" />
        }
        <span>12</span>
        <span>12</span>
        <input type="file" name="name" value="" id="preimage" multiple="multple" />
        @*  webkitdirectory *@
        <br/>
        <span>@ViewData["p1"]</span> <span>@ViewData["laji"]333333333333</span>
        cookies id= <span>@ViewData["id"]</span>
        <button onclick="previewFile()">开始显示图片</button>
        <input type="file" id="preimage2" onchange="previewFile()"><br>
        <div id="imgtable"></div>
        <img id="pre" src="" height="200" alt="Image preview...">
        @*@foreach (var item in dir.GetFiles())
        {
                 <img src="~/gif/@(item.Name)" alt="Alternate Text" />
        }*@
    </div>
<script text="javascript" >
  

    function previewFile() {
        var preview = document.getElementById('pre');
        var imgTable = document.getElementById('imgtable');
        console.log(preview)
        var files = document.getElementById("preimage").files;
        console.log(files)
        for (i = 0; i < files.length;i++) {
           

            if (files[i]) {
               
                var reader = new FileReader();
                reader.readAsDataURL(files[i]);
                reader.addEventListener("load", function () {
                    var img = document.createElement("img");
                    img.style.width = "100%"
                    img.style.height = "100%"
                    img.src = this.result;
                    imgTable.appendChild(img);
                    
                }, false);
            
           
        }
    }
        }
       
</script>